<template>
  <div class="container">
    <div class="container-left">
      <div class="tit-box">
        <div class="change-box">
          <div class="change-item" :class="type==1?'active':''" @click="getData(1,null)">
            <span>档案动态</span>
            <i class="el-icon-refresh-right"></i>
          </div>
          <div class="change-item" :class="type==2?'active':''" @click="getData(2,null)">
            <span>主题动态</span>
            <i class="el-icon-refresh-right"></i>
          </div>
        </div>
        <div class="search-box">
          <div class="search">
            <input
              type="text"
              placeholder="请输入搜索内容"
              autocomplete="off"
              v-model="searchMsg"
            />
            <i class="el-icon-search" @click="getData(null,0)"></i>
          </div>
          <el-select v-model="recordDynamic" placeholder="请选择"
          @change="setRecord">
            <el-option
              v-for="(item,index) in recordDynamicList"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="recordClassify" placeholder="请选择"
          @change="setRecord">
            <el-option
              v-for="(item,index) in recordClassifyList"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading">
        <div class="info-item" v-for="(item,index) in DataList" :key="index" @click="linkDetail(item)">
          <img class="pic" :src="item.headUrl" alt="" />
          <div class="info">
            <p class="name-time">
              <span class="name">{{item.name}}</span>
              <span class="time">{{item.time}}</span>
            </p>
            <p class="tips">{{item.description}}</p>
            <p class="info-tit">{{item.detail}}</p>
          </div>
        </div>
         <no-data :length="DataList.length" :loading="loading"></no-data>
        <span class="more" v-show="DataList.length" @click="getData(null,pageNum)">加载更多<i class="el-icon-d-arrow-left"></i></span>
      </div>
    </div>
    <div class="container-right">
      <div class="archives-list">
        <router-link class="archives-item" :to="{name:'personal'}">
          <img
            class="icon"
            src="../../assets/imgs/index_icon_personal.png"
            alt=""
          />
          <p>
            人事档案 <span>{{ person }}</span
            >个
          </p>
        </router-link>
        <router-link class="archives-item" :to="{name:'twitter'}">
          <img
            class="icon"
            src="../../assets/imgs/index_icon_twitter.png"
            alt=""
          />
          <p>
            推特档案 <span>{{ twitter }}</span
            >个
          </p>
        </router-link>
        <router-link class="archives-item" :to="{name:'organization'}">
          <img
            class="icon"
            src="../../assets/imgs/index_icon_organization.png"
            alt=""
          />
          <p>
            机构档案 <span>{{ org }}</span
            >个
          </p>
        </router-link>
        <router-link class="archives-item" :to="{name:'themes'}">
          <img
            class="icon"
            src="../../assets/imgs/index_icon_theme.png"
            alt=""
          />
          <p>
            主题档案 <span>{{ theme }}</span
            >个
          </p>
        </router-link>
      </div>
      <ul class="link-info">
        <li class="link-item" v-for="(item,index) in themeList" :key="index">
          <img src="../../assets/imgs/index_icon_theme.png" alt="" />
          <p>{{item.entityName}}</p>
          <span  @click="linkThemeDetail(item)">查看详情<i class="el-icon-arrow-right"></i></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  GetRecordIndex,
  GetThemeRecordIndex,
  GetRecordNumber,
  GetThemeRecord,
  GetUserGroups
} from "@/api/index";
import {tipErr,tipSuc,formatDate} from '@/utils/index'
export default {
  data() {
    return {
      loading:false,
      searchMsg:'',
      recordDynamic: null,
      recordClassify: null,
      recordDynamicList: [
        {
          label: "全部动态",
          value: null,
        },
        {
          label: "人物活动",
          value: 'personAction',
        },
        {
          label: "新增推文",
          value: 'newTwitter',
        },
        {
          label: "推特变更",
          value: 'twitterChange',
        },
      ],
      recordClassifyList: [
        {
          label: "全部分类",
          value: 0,
        },
        {
          label: "自定义分类",
          value: 1,
        },
        {
          label: "未分类",
          value: 2,
        },
      ],
      pageSize:10,
      pageNum:0,
      type:1,
      DataList:[],
      org: 0,
      person: 0,
      theme: 0,
      twitter: 0,
      themeList:[]
    };
  },
  mounted() {
    this._GetUserGroups()
    this._GetRecordIndex(this.pageNum);
    this._GetRecordNumber();
    this._GetThemeRecord()
  },
  methods: {
    setRecord(){
      this._GetRecordIndex(0)
    },
    async _GetRecordIndex(index) {
      if(this.loading) return
      this.loading = true
      if(index === null){
        this.recordClassify=null
        this.recordDynamic=null
        this.searchMsg=''
      }
      let params = {
        "recordClassify": this.recordClassify,
        "recordDynamic": this.recordDynamic,
        "row": this.pageSize,
        "searchContent": this.searchMsg,
        "start": index?index*10:0,
        "themeId": null
      }
      if(this.type == 1){
        var { data, msg, code } = await GetRecordIndex(params);
      }else{
        var { data, msg, code } = await GetThemeRecordIndex(params);
      }
      this.loading = false
      if(code == 1){
        if(data.length){
           data.forEach(item=>{
          item.time = formatDate(item.time,'yy-MM-dd hh:mm:ss')
        })
        this.pageNum = index?index+1:1
        this.DataList = [...data]
        }else{
          this.DataList = []
        }
      }else{
        tipErr(msg)
      }
    },
   
    async _GetUserGroups() {
      let { data, msg, code } = await GetUserGroups({
        entityId: null,
      });
      if(code == 1){
        let arr=[];
        data.groups.forEach((item,index)=>{
          arr.push({
            label:item,
            value:item
          })
        })
        this.recordClassifyList = [...arr]
      }
    },
    async _GetThemeRecord() {
      let { data, msg, code } = await GetThemeRecord({
        create_sort: 0,
        recordScope: 0,
        row: 10,
        start: 0,
        type: "THEME",
      });
      if(code == 1){
      this.themeList = [...data.themeBasicInfoList]
      }else{
        tipErr(msg)
      }
    },
    async _GetRecordNumber() {
      let { data, msg, code } = await GetRecordNumber();
      if(code == 1){
        this.org= data.org
        this.person= data.person
        this.theme= data.theme
        this.twitter= data.twitter
      }else{
        tipErr(msg)
      }
    },
    getData(type,index){
      if(!!type){
        this.type = type
      }
      this._GetRecordIndex(index)
    },
    linkDetail(item){
      let name;
      if(item.entityId.indexOf('ACCOUNT_TWITTER') == 0){
        name = 'twitterdetail'
      }else if(item.entityId.indexOf('PERSON') == 0){
        name = 'personalDetail'
      }else if(item.entityId.indexOf('ORGANIZATION') == 0){
        name = 'organizationDetail'
      }
      if(!!name){
        this.$router.push({
          name:name,
          query:{
            entityId:item.entityId,
            name:item.name?item.name:item.entityName
          }
        })
      }
    },
    linkThemeDetail(item){
       this.$router.push({
          name:'themesdetail',
          query:{
            entityId:item.entityId,
            name:item.entityName,
            abstractType:item.abstractType
          }
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  display: flex;
  .container-left {
    width: 1030px;
    padding: 20px 30px;
    background: #1f2025;
    margin-right: 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    .tit-box {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .change-box {
        display: flex;
      }
      .change-item {
        font-size: 16px;
        color: #eee;
        line-height: 40px;
        cursor: pointer;
        margin-right: 35px;
        .el-icon-refresh-right {
          font-size: 16px;
          color: #eee;
          margin-left: 5px;
        }
        &.active {
          font-size: 18px;
          color: #fff;
        }
        &:hover {
          color: #fff;
        }
      }
      .search-box /deep/ {
        display: flex;
        .search {
          width: 200px;
          height: 40px;
          border: 1px solid #3d434c;
          box-sizing: border-box;
          display: flex;
          input {
            width: 150px;
            padding-left: 10px;
            background: transparent;
            font-size: 14px;
            color: #fff;
            &::-webkit-input-placeholder {
              font-size: 14px;
              color: #525a66;
            }
          }
          .el-icon-search {
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            color: #525a66;
            cursor: pointer;
            &:hover {
              color: #fff;
            }
          }
        }
        .el-select {
          margin-left: 10px;
        }
      }
    }
    .info-item {
      padding: 30px 30px 24px 30px;
      background: #262930;
      margin-bottom: 10px;
      display: flex;
      .pic {
        width: 90px;
        height: 90px;
        margin-right: 20px;
      }
      .info {
        flex: 1;
      }
      .name-time {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        line-height: 20px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 11px;
        .time {
          font-size: 12px;
          color: #8a8e99;
          font-weight: normal;
        }
      }
      .tips {
        font-size: 14px;
        color: #8a8e99;
        margin-bottom: 11px;
      }
      .info-tit {
        font-size: 14px;
        color: #b8becc;
        line-height: 24px;
      }
    }
    .more {
      display: block;
      line-height: 54px;
      text-align: center;
      margin: 0 auto;
      font-size: 14px;
      color: #737780;
      cursor: pointer;
      padding: 0 10px;
      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
  .container-right {
    width: 350px;
    box-sizing: border-box;
    flex-shrink: 0;
    .archives-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      .archives-item {
        width: 170px;
        height: 120px;
        box-sizing: border-box;
        padding: 15px 0;
        margin: 0 10px 10px 0;
        background: #1e1f24;
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
        text-align: center;
        text-decoration: none;
        &:nth-child(2n) {
          margin-right: 0;
        }
        img {
          width: 52px;
          height: 52px;
          margin-bottom: 10px;
          box-sizing: border-box;
          border: 0.5px dashed #737780;
        }
        p {
          font-size: 15px;
          color: #fff;
          font-weight: 700;
          line-height: 17px;
          span {
            color: #cc7029;
          }
        }
      }
    }
    .link-info {
      padding: 10px 20px;
      background: #1e1f24;
      height:747px;
      overflow: auto;
    }
    .link-item {
      padding: 20px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #282c33;
      img {
        width: 50px;
        height: 50px;
      }
      p {
        flex: 1;
        font-size: 15px;
        color: #fff;
        font-weight: 700;
        line-height: 23px;
        margin: 0 10px 0 20px;
      }
      span{
        line-height:36px;
        font-size: 12px;
        color: #737780;
        cursor:pointer;
        &:hover{
          color:#eee;
        }
      }
    }
  }
}
</style>
